<template>
  <div>
    <div v-for="(item, index) in dqStations" :key="index">
      <div
        class="Stationspcs"
        :style="{ paddingLeft: leftstyle + 'px' }"
        @click="showfalgs[item.id] = showfalgs[item.id] ? false : true"
      >
        <span>
          <i
            class="iconfont"
            :class="showfalgs[item.id] ? 'iconicon-test6' : 'iconicon-test2'"
          ></i>
          {{ item.pcs }}({{ item.sum }})
        </span>
        <i
          class="iconfont"
          :class="
            Stationhasfn(item) ? 'iconicon-checkbox1' : 'iconicon-checkbox'
          "
          @click.stop="Stationtapfn(item)"
        ></i>
      </div>

      <station-boxnew
        v-if="showfalgs[item.id]"
        :active-charge-car="activeChargeCar"
        :leftstyle="leftstyle + 20"
        :stationspid="item.id"
        @loadingclosefn="loadingclosefn"
        @loadingfn="loadingfn"
        @oneChargeCarfn="ChargeCartaponefn"
        @setactiveChargeCarfn="ChargeCartapfn"
      />
    </div>
    <div
      v-for="ChargeCaritem in dqChargeCars"
      :key="ChargeCaritem.gtel"
      class="ChargeCarbox"
      :style="{ paddingLeft: leftstyle + 20 + 'px' }"
      @click="ChargeCartaponefn(ChargeCaritem)"
    >
      <span
        style="
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          display: flex;
          align-items: center;
        "
      >
        <i
          class="iconfont iconicon-chongdianzhuang"
          :class="'caricon' + ChargeCaritem.gzt"
          style="font-size: 18px"
        ></i>

        {{ ChargeCaritem.mc }}({{ ChargeCaritem.gxh || 0 }})({{
          ChargeCaritem.gtel
        }})
      </span>
      <i
        class="iconfont"
        :class="
          ChargeCarhasfn(ChargeCaritem)
            ? 'iconicon-checkbox1'
            : 'iconicon-checkbox'
        "
        @click.stop="ChargeCartapfn(ChargeCaritem)"
      ></i>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'StationBoxnew',
    props: {
      dqpcspid: {
        default: '',
      },

      activeChargeCar: {
        default: new Set(),
      },
      stationspid: {
        // type:String,
        default: undefined,
      },
      leftstyle: {
        default: 10,
      },
      dqStationdatas: {
        default: [],
      },
    },
    data() {
      return {
        showfalgs: {},
        dqChargeCars: [],
        dqStations: [],
      }
    },
    computed: {},
    watch: {
      stationspid: function () {
        this.$nextTick(() => {
          this.getdatafn()
        })
      },
      dqStationdatas: function () {
        this.$nextTick(() => {
          this.getdatafn()
        })
      },
    },
    mounted() {
      this.getdatafn()
    },
    methods: {
      loadingfn() {
        this.$emit('loadingfn')
      },
      loadingclosefn() {
        this.$emit('loadingclosefn')
      },
      getdatafn() {
        this.showfalgs = []
        if (this.dqStationdatas.length != 0 && !this.stationspid) {
          this.dqStations = this.dqStationdatas
          return
        }
        this.loadingfn()

        console.log(this.dqStationdatas, this.stationspid, 111)
        Promise.all([
          this.$store.dispatch('station/getStationPidfn', this.stationspid),
          this.$store.dispatch(
            'station/getChargeCarSearchPcsfn',
            this.stationspid
          ),
        ]).then((datas) => {
          this.dqStations = datas[0]
          this.dqChargeCars = datas[1]
          this.loadingclosefn()
        })
      },

      ChargeCarhasfn(item) {
        return this.activeChargeCar.has(item)
      },
      Stationhasfn(item) {
        let ChargeCars = this.$store.state.station.ChargeCarSearchPcs[item.id]
        ChargeCars = ChargeCars ? ChargeCars : []
        // let ChargeCars = await this.$store.dispatch("station/getChargeCarSearchPcsfn",item.id);
        if (ChargeCars.length == 0) {
          return false
        }
        ChargeCars = ChargeCars.filter((f) => {
          return !this.activeChargeCar.has(f)
        })
        return ChargeCars.length == 0
      },
      async Stationtapfn(item) {
        let ChargeCars = await this.$store.dispatch(
          'station/getChargeCarSearchPcsfn',
          item.id
        )
        if (ChargeCars.length == 0) {
          this.$message.warning('此区域下无设备')
          return
        }
        if (!this.Stationhasfn(item)) {
          ChargeCars = ChargeCars.filter((f) => {
            return !this.activeChargeCar.has(f)
          })
        }
        ChargeCars.forEach((e) => {
          this.ChargeCartapfn(e)
        })
      },
      ChargeCartaponefn(item) {
        this.$emit('oneChargeCarfn', item)
      },
      ChargeCartapfn(item) {
        this.$emit('setactiveChargeCarfn', item)
      },
    },
  }
</script>
<style lang="scss" scoped>
  .Stationspcs {
    line-height: 20px;
    padding: 10px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
  }

  .Stationspcs:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  .ChargeCarbox {
    line-height: 36px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    padding-right: 10px;
    align-items: center;
  }

  .ChargeCarbox:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  .caricon1 {
    color: #2093f5 !important;
  }
</style>
